<template>
	<view class="hdtybox" :class="hdc">
		<topboxVue :tit="$t('hd.bt3')"></topboxVue>
		<view class="fxbox">

			<view class="fxbox-infobox mb20">
				<view class="bj_between mb10">
					<view class="f30">
						{{$t("fx.tit1")}}
					</view>
					<view class="fxbox-infobox-jd f22 bj_center" @click="tocz">
						<text>{{$t("fx.tit2")}}</text>
						<image src="/static/lm/next.png"></image>
					</view>
				</view>
				<view class="bj_between">
					<view class="fxbox-infobox-jd-item">
						<view class="f28 fwb">
							<text>{{$t("menu.$")}}</text>
							<text>{{user.money}}</text>
						</view>
						<view class="cc5 f20">
							{{$t("fx.tit3")}}
						</view>
					</view>
					<view class="fxbox-infobox-jd-item">
						<view class="f28 fwb">
							{{children_count}}
						</view>
						<view class="cc5 f20">
							{{$t("fx.tit4")}}
						</view>
					</view>
				</view>
			</view>

			<view class="fxbox-chbox bj_between mb20">
				<view class="fxbox-chbox-item bj_center" :class="item.ch ? 'fxbox-chbox-chact' : ''"
					v-for="item in chlist" @click="chbox(item)">
					{{item.name}}
				</view>
			</view>

			<fx1Vue v-if="chlist[0].ch"></fx1Vue>
			<fx2Vue v-if="chlist[1].ch"></fx2Vue>
			<fx3Vue v-if="chlist[2].ch"></fx3Vue>

		</view>

		<bottomVue style="margin-top: 100rpx;"></bottomVue>
		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import fx1Vue from '../fx/fx1.vue';
	import fx2Vue from '../fx/fx2.vue';
	import fx3Vue from '../fx/fx3.vue';
	import common from '../../js/common';
	let loading = ref(false)
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")
	let user = ref({})
	let children_count = ref("--")

	let chlist = ref([{
			name: t("fx.lb1"),
			ch: true
		},
		{
			name: t("fx.lb2"),
			ch: false
		},
		{
			name: t("fx.lb3"),
			ch: false
		}
	])

	function chbox(item) {
		for (var i = 0; i < chlist.value.length; i++) {
			chlist.value[i].ch = false
		}
		item.ch = true
	}


	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}

	onShow(function() {
		loading.value = true
		common.getMinLoginUser({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			getApp().globalData.userInfo.user = res.data.user
			user.value = res.data.user
			loading.value = false
		})
		common.inviteDetails({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res =>{
			children_count.value = res.data.user.children_count
		})
	})

	function tocz() {
		uni.navigateTo({
			url: "/pages/index/tx?v=1"
		})
	}
</script>

<style scoped lang="scss">
	.fxbox {
		padding: 30rpx 20rpx;

		&-infobox {
			width: 710rpx;
			height: 160rpx;
			background: url("/static/hd/fxb.png") no-repeat center center;
			background-size: 100% 100%;
			padding: 26rpx 38rpx 20rpx 28rpx;

			&-jd {
				width: 156rpx;
				height: 44rpx;
				background: #02082C;
				border-radius: 100rpx;

				image {
					margin-left: 6rpx;
					width: 16rpx;
					height: 16rpx;
				}

				&-item {
					width: 50%;
					padding-left: 10rpx;
				}
			}
		}

		&-chbox {
			height: 84rpx;
			background: #001F0A;
			border-radius: 12rpx;

			&-item {
				width: 33%;
				height: 84rpx;
				color: #A2B5D5;
			}

			&-item:nth-child(1) {
				border-radius: 12rpx 0rpx 0rpx 12rpx;
			}

			&-item:nth-child(3) {
				border-radius: 0rpx 12rpx 12rpx 0rpx;
			}

			&-chact {
				background: #098B34;
				color: #FFFFFF;
			}
		}
	}
</style>